<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            width: 300px;
        }
        
        td,
        th {
            width: 200px;
            border: 1px solid black;
        }
    </style>
    <script>
    window.onload = function() {
        var shopping = [{
            name: "电饭煲",
            score: 100,
            num: 2
        }, {
            name: "电视机",
            score: 70,
            num: 5
        }, {
            name: "抽油烟机",
            score: 900,
            num: 8
        }, {
            name: "微波炉",
            score: 50,
            num: 10
        }]
        
        var tbody=document.querySelector("tbody");

        var content="";
        for(var i=0;i<shopping.length;i++){
            content=content+"<tr><td>"+shopping[i].name+"</td><td>"+shopping[i].score+"</td><td>"+shopping[i].num+"</td></tr>";
        }
        tbody.innerHTML=content;
        var inputName=document.querySelector(".input-name");
        var inputScore=document.querySelector(".input-score");
        var inputNum=document.querySelector(".input-num");
        var btnAdd=document.querySelector(".btn-add");
        btnAdd.addEventListener("click",function(e){
            if(inputName.value===""||inputScore.value===""||inputNum.value===""){
                return;
            }
        var content=tbody.innerHTML;
        content=content+"<tr><td>"+inputName.value+"</td><td>"+inputScore.value+"</td><td>"+inputNum.value+"</td></tr>";
        var temp={};
        temp.name=inputName.value;
        temp.score=inputScore.value;
        temp.num=inputNum.value;
        shopping.push(temp);
        tbody.innerHTML=content;
    })
    var btnSortD=document.querySelector(".btn-sort-d");
    var swap=function(oldIndex,newIndex){
        var temp=shopping[oldIndex];
        shopping[oldIndex]=shopping[newIndex];
        shopping[newIndex]=temp;
    }
    var showList=function(){
        var content="";
        for(var i=0;i<shopping.length;i++){
            content=content+"<tr><td>"+shopping[i].name+"</td><td>"+shopping[i].score+"</td><td>"+shopping[i].num+"</td></tr>";
        }
        tbody.innerHTML=content;
    }
    btnSortD.addEventListener("click",function(e){
        for(var i=0;i<shopping.length;i++){
            var max=shopping[i].score;
            var maxIndex=i;
            for(var j=i+1;j<shopping.length;j++){
                if(shopping[j].score>max){
                    max=shopping[j].score;
                    maxIndex=j;
                }
            }
            if(maxIndex!=i){
                swap(i,maxIndex);
            }
            showList();
        }
        console.log(shopping);
    })
    //正序
    var btnSortZ=document.querySelector(".btn-sort-z");
    btnSortZ.addEventListener("click",function(){
        for(var i=0;i<shopping.length;i++){
            var max=shopping[i].score;
            var maxIndex=i;
            for(var j=i+1;j<shopping.length;j++){
                if(shopping[j].score<max){
                    max=shopping[j].score;
                    maxIndex=j;
                }
            }
            if(maxIndex!=i){
                swap(i,maxIndex);
            }
            showList();
        }
        console.log(shopping);
    })
    }
</script>
</head>

<body>
    商品名：<input type="text" class="input-name"/>价格：<input type="text" class="input-score"/>数量：<input type="text" class="input-num"/>
    <button class="btn-add">添加</button>
    <button class="btn-sort-d">倒序排列</button>
    <button class="btn-sort-z">正序排列</button>
    <table>
        <thead>
            <tr>
                <th>商品名字</th>
                <th>价格</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>


</html>